<template>
	<view>
		<view class="fui-header fui-header-success">
			<navigator  class="fui-header-left iconfont icon-fanhui" @tap="result" >
			  
			</navigator>
			<view class="title">商品管理</view>
			<view class="fui-header-right">
				<navigator class="btn-more" @click="menu" v-if="!bmenu">更多</navigator>
				<navigator class="batch-cancel" @click="tcancel" v-if="bmenu">取消</navigator>
			</view>
		</view>
		<view class="status_bar"></view>
		<v-tabs
		  :value="status"
		  :scroll="false"
		  :tabs="nav"
		  :bold="false"
		   v-on:change="change"  
		></v-tabs>
		<view class="fui-content">
			<uni-search-bar radius="5" placeholder="输入关键字" bgColor="#fff" clearButton="auto" cancelButton="auto" @confirm="search"  @cancel="cancel"/>
			
			<view class="fui-list-group" v-for="(key, index) in list" :key="index">
				<checkbox-group >
					<view class="fui-list" >
						<view class="fui-list-media batch-item" v-if="bmenu">							
							<checkbox value="" class="fui-radio" style="transform:scale(0.7)" :checked="list[index].checked" @click="dx(index)" />
						</view>
						<navigator class="fui-list-media round" :url="'../goods/add?id='+list[index].id">
							<image :src="list[index].thumb" class="round"></image>
							<view class="title">多商户</view>			                
						</navigator>
						<navigator class="fui-list-inner" :url="'../goods/add?id='+list[index].id">
							<view class="title">{{list[index].title}}</view>
							<view class="subtitle">
								<view class="price danger">
									<view v-if="list[index].minprice!=list[index].maxprice">
										￥{{list[index].minprice}}~￥{{list[index].maxprice}}
									</view>
									<view  v-else>
										￥{{list[index].minprice}}
									</view>
								</view>
							</view>
							<view class="subtitle">
								<text class="total">库存: {{list[index].total}}</text>
								<text class="total">销量: {{list[index].sales}}</text>
							</view>
						</navigator>
					   
						<view class="fui-list-angle fundot-parent batch-hide">
							<view :class="'fundot iconfont icon-xiangqing '+ (list[index].id==activeId?'active':'')" @click="made(list[index].id)" v-if="!bmenu"></view>
							<view :class="'funmenu '+(list[index].id==activeId?'in':'out')" >	
								<navigator open-type="navigate" :url="'../goods/add?id='+list[index].id">
									<view class="iconfont icon-edit"></view><view>编辑</view>
								</navigator>			                            
								<navigator @tap="xiajia(list[index].id,index)" v-if="status<=1">
									<view class="iconfont icon-shangjia1"></view><view>下架</view>
								</navigator>
								<navigator @tap="shangjia(list[index].id,index)" v-if="status==2">
									<view class="iconfont icon-shangjia"></view><view>上架</view>
								</navigator>
								<navigator @tap="del(list[index].id,index)"  v-if="status<=2">
									<view class="iconfont icon-shanchu"></view><view>删除</view>
								</navigator>
								<navigator @tap="url(list[index].id)" v-if="status<=1">
									<view class="iconfont icon-chakan"></view><view>查看</view>
								</navigator>
								<navigator  >
									<button openType="share" :data-id="list[index].id">
										<view class="iconfont icon-chakan"></view><view>分享</view>
									</button>									
								</navigator>

								<navigator @tap="hy(list[index].id,index)" v-if="status==3">
									<view class="iconfont icon-huanyuan"></view><view>还原</view>
								</navigator>
							</view>
						</view>
					</view>
				</checkbox-group>
			</view>
			<view  class="fui-title center" v-if="list.length<1" >没有数据</view>
			<view  class="fui-title center" v-if="stop==false">没有更多了</view>
		
			<view class="head-menu-mask out" v-if="tmenu" @click="show"></view>
			<view :class="'head-menu '+ (tmenu?'in':'out')" >			       
				<navigator class="batch-btn" @tap="pl"><text class="iconfont icon-piliang1"></text> 批量管理</navigator>				
				<navigator class="external" url="/pages/goods/add"><text class="iconfont icon-jia"></text> 添加商品</navigator>				
			</view>
		
			<view class="fui-footer batch-item" v-if="bmenu">
				<view class="fui-list noclick">
					<view class="fui-list-media">
						<label class="checkbox-inline checkall"> 
							<checkbox style="transform:scale(0.7); font-size: 30rpx;" :checked="all" @click="select" >全选</checkbox>
						</label>
					</view>
					<view class="fui-list-inner">
					</view>
				   
					<view class="fui-list-angle hide batch-putoff" style="display: block;" @click="batch_xiajia" v-if="status<=1">
						<view class="btn btn-sm btn-success btn-goods-batch">批量下架</view>
					</view>
			
					<view class="fui-list-angle hide batch-puton" @click="batch_shangjia"  v-if="status==2">
						<view class="btn btn-sm btn-success btn-goods-batch">批量上架</view>
					</view>
				
					<view class="fui-list-angle hide batch-delete" @click="batch_del" v-if="status<=2">
						<view class="btn btn-sm btn-danger btn-goods-batch">批量删除</view>
					</view>
				
					<view class="fui-list-angle hide batch-restore" v-if="status==3" @click="batch_hy">
						<view class="btn btn-sm btn-danger btn-goods-batch" >批量还原</view>
					</view>					
				</view>
			</view>
		</view>
		<!-- <view class="fixd-nav">
			<view class="iconfont icon-shezhi1"></view>
			<view class="navsm">
				<view>编辑</view>
				<view>修改分类</view>
			</view>
		</view> -->
		<view class="nav-model">
			<view :class="'nav-one '+(nav_mask ? 'out' : '')">
				<span>编辑</span>
				<navigator class="icox icox-shezhi" openType="switchTab" url=""></navigator>
			</view>
			<view :class="'nav-two '+(nav_mask ? 'out' : '')">
				<span>修改分类</span>
				<navigator class="icox icox-edit" openType="switchTab" url=""></navigator>
			</view>
			<view @tap="navFun" :class="'nav ' + (nav_mask ? 'icox icox-close' : '')">
				<text v-if="!nav_mask">快捷</text>
				<text v-if="!nav_mask">导航</text>
			</view>	
		</view>
		<view class="bstatus_bar"></view>
		<footernav v-if="isshow"></footernav>
	</view>
</template>

<script>
	var t = getApp().globalData,
		e = t.requirejs('core'),
		i = t.requirejs('foxui'),
		a = t.requirejs('jquery');
	export default {
		data() {
			return {
			  list:[],	
			  status: 0,
			  keywords: '',
			  active:false,
			  tmenu:false,
			  bmenu:false,
			  nav:['出售中','已售罄', '待审核','仓库中', '回收站'],
			  navKey:[
				  'sale',
				  'out',
				  'verify',
				  'stock',
				  'cycle'
			  ],
			  all:false,
			  page:1,
			  //下拉数据没有数据，暂停下拉操作
			  stop:true,
			  isshow:true,
			  activeId:'',
			  nav_mask: !1
			  
			}
		},
		onShow(){
			this.bmenu=false
			this.tmenu=false
			this.status=0
			this.page=1
			this.list=[]
			this.$nextTick(()=>{
				this.init()
				
			})
			
		},
		onLoad(){
			
		},
		onShareAppMessage(el) {
			
			return e.onShareAppMessage('/pages/goods/detail/index?id=' + el.target.dataset.id, '')
		
		},
		methods: {
			// 底部导航
			navFun(){
				this.nav_mask= !this.nav_mask
			},
			url(id){
				let url=t.api+'&r=goods.detail&id='+id
				url=url.replace("jxshops_api.php","jxshops.php")　
				location.href=url
				
			},
			//页面初始化
			init(type=''){
				let self=this
				let data={}
				data.status=this.navKey[this.status]
				data.keywords=this.keywords
				data.page=this.page
				//data.token='abc'
				//商品数据
				e.post('merchmanage.goods.getlist', data, function(t) {
				
					if(t.result.list.length<1){
						if(data.page==1)
							self.stop=true
						else
							self.stop=false
						return	
					}
					Object.keys(t.result.list).map((item)=>{
						t.result.list[item].checked=false
					})
					
					if(type=='add'){
						self.list=self.list.concat(t.result.list);
					}else{
						self.list=t.result.list
					}
					
				});
			},
			show(){
				this.tmenu=false
			},
			//搜索
			search(res) {
				this.page=1
				this.list=[]
				this.keywords=res.value
				this.init()
				
			},
			input(res) {
				this.keywords = res.value
			},
			cancel(res) {
				this.keywords=''
				this.init()
	
			},
			// 商品编辑
			made(id){
				if(this.activeId!=id)
					this.activeId=id
				else
					this.activeId=''
				this.active=!this.active
			},
			// 点击更多
			menu(){				
				this.tmenu=!this.tmenu
			},
			//列表单选是否全部选中，批量复选自动打勾
			dx(index){
				let size=this.list.length,sum=0
				this.list[index].checked=!this.list[index].checked
				Object.keys(this.list).map((item)=>{
					if(!this.list[item].checked){
						return false
					}else{
						sum+=1
					}
					
				})
				if(size==sum){
					this.all=true
				}else{
					this.all=false
				}
			},
			//点击更多 批量管理
			pl(){
				this.isshow=false
				this.tmenu=!this.tmenu
				this.bmenu=!this.bmenu
				
			},
			//点击取消
			tcancel(){
				this.isshow=true
				this.bmenu=!this.bmenu
				//点击取消，全选状态 和列表复选 取消
				this.all=false
				Object.keys(this.list).map((item)=>{
					this.list[item].checked=false
				})
				
			},
			//菜单选择
			change(index){
				this.list=[]
				this.all=false
				this.isshow=true
				this.bmenu=false
				this.status=index
				this.stop=true
				this.page=1
				this.init()
			},
			//下架
			xiajia(id,index){
				let self=this
				uni.showModal({
				    title: '提示',
				    content: '确认下架吗',
				    success: function (res) {
				        if (res.confirm) {
				            //下架接口
				            e.get('merchmanage.goods.status', {id,'status':0}, function(t) {
				            	if(t.status==1){
									uni.showToast({
									    title: '操作成功',
										icon:"none",
									    duration: 2000
									});
									self.activeId=''
									self.list.splice(index, 1)
				            		
				            	}else{
				            		uni.showToast({
				            		    title: '操作失败',
				            			icon:"none",
				            		    duration: 2000
				            		});
				            	}
				            });
				        } 
				    }
				});
				
			},
			//删除
			del(id,index){
				let self=this
				uni.showModal({
				    title: '提示',
				    content: '确认删除吗',
				    success: function (res) {
				        if (res.confirm) {
				            //删除接口
				            e.get('merchmanage.goods.delete', {id}, function(t) {
				            	if(t.status==1){
				            		uni.showToast({
				            		    title: '操作成功',
				            			icon:"none",
				            		    duration: 2000
				            		});
				            		self.activeId=''
				            		self.list.splice(index, 1)
				            	}else{
				            		uni.showToast({
				            		    title: '操作失败',
				            			icon:"none",
				            		    duration: 2000
				            		});
				            	}
				            });
				        } 
				    }
				});
				
			},
			//全选
			select(){
				this.all=!this.all
				Object.keys(this.list).map((item)=>{
					this.list[item].checked=this.all
				})
				
				
			},
			//列表中选中id
			selectId(){
				let sum=[]
				Object.keys(this.list).map((item)=>{
					if(this.list[item].checked){
						sum.push(this.list[item].id)
					}
				})
				return sum.toString()
			},
			nodata(ids){
				const id = ids.split(',');
				Object.keys(id).map((item)=>{
					let index = this.list.findIndex(v => v.id === id[item])
					this.list.splice(index, 1)
				})
			},
			//批量下架
			batch_xiajia(){
				let self=this, data={}
				data.status=0
				data.ids=this.selectId();
				uni.showModal({
				    title: '提示',
				    content: '确认下架选中商品吗？',
				    success: function (res) {
				        if (res.confirm) {
				           //批量下架
				           e.get('merchmanage.goods.status', data, function(t) {
								if(t.status==1){
									uni.showToast({
									    title: '操作成功',
										icon:"none",
									    duration: 2000
									});
									self.activeId=''
									self.nodata(data.ids)
									
								}else{
									uni.showToast({
									    title: '操作失败',
										icon:"none",
									    duration: 2000
									});
								}
				           });
				        } 
				    }
				});
				
			},
			//批量删除
			batch_del(){
				let self=this, data={}
				data.ids=this.selectId();
				uni.showModal({
				    title: '提示',
				    content: '确认删除选中商品吗？',
				    success: function (res) {
				        if (res.confirm) {
				           //批量删除
				           e.get('merchmanage.goods.delete', data, function(t) {
								if(t.status==1){
									uni.showToast({
									    title: '操作成功',
										icon:"none",
									    duration: 2000
									});
									self.activeId=''
									self.nodata(data.ids)
								}else{
									uni.showToast({
									    title: '操作失败',
										icon:"none",
									    duration: 2000
									});
								}
				           });
				        } 
				    }
				});
				
			},
			 //批量上架
			batch_shangjia(){
				let self=this, data={}
				data.status=1
				data.ids=this.selectId();
				uni.showModal({
				    title: '提示',
				    content: '确认下架选中商品吗？',
				    success: function (res) {
				        if (res.confirm) {
				           //批量上架
				           e.get('merchmanage.goods.status', data, function(t) {
								if(t.status==1){
									uni.showToast({
									    title: '操作成功',
										icon:"none",
									    duration: 2000
									});
									self.activeId=''
									self.nodata(data.ids)
								}else{
									uni.showToast({
									    title: '操作失败',
										icon:"none",
									    duration: 2000
									});
								}
				           });
				        } 
				    }
				});
				
			},
			 //批量还原
			batch_hy(){
				let self=this, data={}
				data.ids=this.selectId();
				uni.showModal({
				    title: '提示',
				    content: '确认恢复到仓库吗？',
				    success: function (res) {
				        if (res.confirm) {
				           //批量删除
				           e.get('merchmanage.goods.restore', data, function(t) {
								if(t.status==1){
									uni.showToast({
									    title: '操作成功',
										icon:"none",
									    duration: 2000
									});
									self.activeId=''
									self.nodata(data.ids)
								}else{
									uni.showToast({
									    title: '操作失败',
										icon:"none",
									    duration: 2000
									});
								}
				           });
				        } 
				    }
				});
				
			},
			//还原
			hy(id,index){
				let self=this
				uni.showModal({
				    title: '提示',
				    content: '确认恢复到仓库吗？',
				    success: function (res) {
				        if (res.confirm) {
				           //恢复到仓库
				           e.get('merchmanage.goods.restore', {id}, function(t) {
								if(t.status==1){
									uni.showToast({
									    title: '操作成功',
										icon:"none",
									    duration: 2000
									});
									self.activeId=''
									self.list.splice(index, 1)
								}else{
									uni.showToast({
									    title: '操作失败',
										icon:"none",
									    duration: 2000
									});
								}
				           });
				        } 
				    }
				});
			},
			//上架
			shangjia(id,index){
				let self=this
				uni.showModal({
			     title: '提示',
			     content: '确认上架吗？',
			     success: function (res) {
			         if (res.confirm) {
			            //恢复到仓库
			            e.get('merchmanage.goods.status', {id,'status':1}, function(t) {
			 				if(t.status==1){
			 					uni.showToast({
			 					    title: '操作成功',
			 						icon:"none",
			 					    duration: 2000
			 					});
			 					self.activeId=''
			 					self.list.splice(index, 1)
			 				}else{
			 					uni.showToast({
			 					    title: '操作失败',
			 						icon:"none",
			 					    duration: 2000
			 					});
			 				}
			            });
			         } 
			     }
			 });
		 },
		 //返回上一页	
			result(){
				let pages = getCurrentPages();
				if(pages.length<2){
					uni.navigateTo({
					    url: '../merchmanage/merchmanage'
					});
				}else{
					uni.navigateBack({
						 delta: 1
					});	
				}
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
		//下拉加载
		onReachBottom(){
			if(this.stop==false){
				return false
			}
			this.page+=1
			this.init('add')
		}
		
	}
</script>

<style lang="scss">
@import '../../uni.scss';

.fui-list-media.round{
	overflow: hidden;
	border-radius: 12rpx;
}
.fui-list-media .title{
	background: rgba(0,0,0,0.6);
	font-size: 20rpx;
	height: 30rpx;
	line-height: 30rpx;
}
.fui-footer .fui-list-media{
	height: 48rpx;
	line-height: 48rpx;
}
.fui-list-inner .title{
	font-size: 30rpx;
	color: #444;
}
.fui-list-inner .subtitle{
	font-size: 28rpx;
	padding: 4rpx 0;
}
.fui-list-inner .subtitle .total{
	width: 200rpx;
	font-size: 24rpx;
	display: inline-block;
}
.fui-list-angle.fundot-parent{
	width: 100rpx;
	height: 100rpx;
	margin-right: 0;
}
.fui-list .fundot{
	position: absolute;
	bottom: 0;
	right: 0;
	background: #eee;
	height: 40rpx;
	width: 60rpx;
	text-align: center;
	font-size: 50rpx;
	line-height: 40rpx;
	border-radius: 20rpx;
	color: #888;
}
.fui-list .fundot.active{
	color: #5cb85c;
}
.fui-list .funmenu {
    position: absolute;
    right: 80rpx;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    border-radius: 10rpx;
    color: #fff;
    padding: 20rpx 15rpx 10rpx;
    align-items: center;
    display: flex;
    opacity: 0;
    transition-property: transform, opacity;
    transform: translate3d(50%, 50%, 0) scale(0);
    transition-property: transform, opacity;
}
.fui-list .funmenu .iconfont{
	font-size: 35rpx;
	margin-bottom: 10rpx;
}
.fui-list .funmenu .icon-shanchu{
	font-size: 30rpx;
}
.fui-list .funmenu:before{
    content: "";
    position: absolute;
    bottom: 10rpx;
    right: -10rpx;
    width: 0;
    height: 0;
    border-top: 10rpx solid transparent;
    border-bottom: 10rpx solid transparent;
    border-left: 10rpx solid rgba(0,0,0,0.8);
}
.fui-list .funmenu.in {
    opacity: 1;
    transition-duration: 300ms;
    transform: translate3d(0, 0, 0) scale(1);
}
.fui-list .funmenu.out {
    opacity: 0;
    z-index: 10999;
    transition-duration: 300ms;
    transform: translate3d(50%, 50%, 0) scale(0);
}
.fui-list .funmenu navigator{
    width: 2rem;
    flex: 1;
    display: block;
    font-size:23rpx;
    line-height: 25rpx;
    text-align: center;
    color: #fff;
}
.fui-list .funmenu navigator button{
	font-size:23rpx;
	line-height: 25rpx;
	padding: 0;
	background-color: transparent;
	color: #fff;
	overflow: inherit;
}
.fui-header navigator {
	font-size: 24rpx;
	padding: 0 20rpx;
}

.head-menu-mask {
    background: rgba(0,0,0,0.5);
    position: fixed;
    top: 88rpx;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;

}
.head-menu {
    position: fixed;
    top: 102rpx;
    right: 10rpx;
    border-radius: 10rpx;
    background: #fff;
    z-index: 9999;
    padding: 10rpx 0.5rem;
}
.head-menu .iconfont{
	padding-right: 10rpx;
}
.head-menu.in {
    opacity: 1;
    transition-duration: 500ms;
}
.head-menu.out {
    opacity: 0;
    transition-duration: 500ms;
	right: -200rpx;
}
.head-menu:before {
    position: absolute;
    content: "";
    top: -10rpx;
    right: 40rpx;
    height: 20rpx;
    width: 20rpx;
    background: #fff;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}
.head-menu navigator {
    font-size: 0.75rem;
    color: #777;
    padding: 15rpx 10rpx;
    border-top: 0.5px solid #eee;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.head-menu navigator:first-child {
    border: none;
}
.head-menu .icon{
	padding-right: 10rpx;
}
.fui-footer.batch-item {
    box-shadow: none;
    -webkit-box-shadow: none;
}
.fui-footer.order-detail {
    line-height: 2.5rem;
    padding: 0 0.5rem;
}
.fui-footer.batch-item:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: #d0d0d0;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
.fui-footer.batch-item .fui-list {
    padding: 20rpx;
}
.fui-footer.batch-item .btn {
    margin-top: 0;
}
// .fui-footer.batch-item .checkbox-inline, .radio-inline {
//     padding-left: 1rem;
// }
.checkbox-inline text{
	padding-left: 8rpx;
	position: relative;
	top: 5rpx;
}
.fui-footer.batch-item .fui-list-angle:last-child {
    margin-right: 0;
}
.fui-footer .btn.btn-sm {
    height: 65rpx;
    line-height: 65rpx;
}
.btn.btn-success{
	background: #5cb85c;
	border-color: #5cb85c;
}
.btn.btn-danger {
	background: #d9534f !important;
	border: 1px solid #d9534f;
}
// 底部按钮
.fixd-nav{
	position: fixed;
	right: 20rpx;
	bottom: 150rpx;
}
.fixd-nav .iconfont{
	width: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background: #5cb85c;
	border-radius: 50%;
	color: #fff;
	position: relative;
}
.navsm{
	width: 100rpx;
	position: absolute;
	bottom: 85rpx;
	right: 5rpx;
	line-height: 70rpx;
	background: #5cb85c;
	color: #fff;
	padding: 5rpx;
	box-shadow: 0 0 10rpx 0 rgba(0,0,0,.3);
	border-radius: 10rpx;
}
.navsm view:first-child{
	border-bottom: 1px solid #eee;
}
// 底部导航
.nav-mask {
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    display: none;
}

.nav-model view,.nav-model button {
    position: fixed;
    right: 20rpx;
    z-index: 999;
    font-size: 22rpx;
    color: #fff;
    transition: all 0.7s;
    bottom: 180rpx;
    opacity: 0;
}
.nav-model button {
    background: 0;
    padding: 0;
}

.nav-model view.nav {
    display: inline-block;
    width: 84rpx;
    height: 84rpx;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0,0,0,0.5);
    bottom: 180rpx;
    text-align: center;
    padding-top: 16rpx;
    box-sizing: border-box;
    opacity: 1;
    z-index: 999;
    transition: none;
}

.nav-model view span,.nav-model button span {
    display: none;
}

.nav-model view.out,.nav-model button.out {
    opacity: 1;
    transform: rotate(360deg);
}

.nav-model view.nav-one.out {
    bottom: 282rpx;
}

.nav-model view.nav-two.out {
    bottom: 396rpx;
}

.nav-model view.nav text {
    display: block;
    line-height: 30rpx;
}

.nav-model .icox {
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    font-size: 40rpx;
    width: 84rpx;
    height: 84rpx;
    display: inline-block;
    text-align: center;
    line-height: 84rpx;
}

.nav-model view.nav.icox {
    padding: 0;
    background: #f55;
    font-size: 50rpx;
    text-align: center;
    line-height: 84rpx;
}
</style>
